<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<%@ page import="com.dao.Booking" %>
<%@ page import="com.dao.BookingDetail" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
<script language='javascript' type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script language='javascript' type="text/javascript" src="../js/bookingJS.js"></script>
<jsp:useBean id="BookingDetail" scope="request" type="java.util.List<BookingDetail>"></jsp:useBean>
<style>.reserved{background-color:yellow;}
	   .td_blank{height:50px;}</style>
</head>
<body>
	<form>
		<div id='div_detail'>
			<table>
				<tr>
					<td>
						<span>Name : <%=BookingDetail.get(0).getName() %></span>
					</td>
					<td>
						<span>Monthly Calendar : <%=BookingDetail.get(0).getYear() %> - <%=BookingDetail.get(0).getMonth() %></span>
					</td>
					<td>
						<input id='btn_return' type='button' value='Return' />
					</td>
				</tr>				
			</table>
		</div>		
		
		
		<div id='div_calendar'>
			<table border='1'>
				<tr>		
					<td width="100px" align='center'>Sunday</td>			
					<td width="100px" align='center'>Monday</td>
					<td width="100px" align='center'>Tuesday</td>
					<td width="100px" align='center'>Wednesday</td>
					<td width="100px" align='center'>Thursday</td>
					<td width="100px" align='center'>Friday</td>
					<td width="100px" align='center'>Saturday</td>					
				</tr>
				
				<%int countDay=1;
				  for (int i=0;i<6;i++){%>
					<tr>
						<% if(i<1){ %>
							<% for(int j = 0;j<BookingDetail.get(0).getFirstDayWeek()-1;j++){ %>
								<td></td>
							<%} %>
							<% for(int j = 0; j<8-BookingDetail.get(0).getFirstDayWeek();j++){ %>
								<%if (j!=7){ %>
								<td align='center' class='canbook'>
									<%=countDay %>
									<%countDay++; %>
								</td>
								<%} %>
							<%} %>
						<%} else if (i>1 && i<5) {%>
							<% for(int j = 0;j<7;j++){ %>
								<% if(countDay<=BookingDetail.get(0).getTotalDayInMonth()){ %>
									<% if(countDay==25){ %>
										<td align='center' class='reserved'>
											<%=countDay %>
											<%countDay++; %>
										</td>
									<%} else { %>
										<td align='center' class='canbook'>
											<%=countDay %>
											<%countDay++; %>
										</td>
									<%} %>
								<%} else { %>
								<td></td>
								<%} %>
							<%} %>
						<%} else { %>
							<% for(int j = 0;j<7;j++){ %>
								<% if(countDay<=BookingDetail.get(0).getTotalDayInMonth()){ %>
								<td align='center'>
									<%=countDay %>
									<%countDay++; %>
								</td>
								<%} %>
							<%} %>
						<%} %>
					</tr>
				<%} %>	

			</table>
		</div>
		
		<br/>
		
		<div id='div_workinghour_blank'>
			<table border='1'>
				<tr>
					<td width="100px" align='center'>09:00-10:00</td>
					<td width="100px" align='center'>10:00-11:00</td>
					<td width="100px" align='center'>11:00-12:00</td>
					<td width="100px" align='center'>12:00-13:00</td>
					<td width="100px" align='center'>13:00-14:00</td>
					<td width="100px" align='center'>14:00-15:00</td>
					<td width="100px" align='center'>15:00-16:00</td>
					<td width="100px" align='center'>16:00-17:00</td>
					<td width="100px" align='center'>17:00-18:00</td>
				</tr>
				<tr>
					<td class='td_blank' id='r9'></td>
					<td class='td_blank' id='r10'></td>
					<td class='td_blank' id='r11'></td>
					<td class='td_blank' id='r12'></td>
					<td class='td_blank' id='r13'></td>
					<td class='td_blank' id='r14'></td>
					<td class='td_blank' id='r15'></td>
					<td class='td_blank' id='r16'></td>
					<td class='td_blank' id='r17'></td>
				</tr>
			</table>
		</div>
		
		<div id='div_workinghour'>
			<table border='1'>
				<tr>
					<td width="100px" align='center'>09:00-10:00</td>
					<td width="100px" align='center'>10:00-11:00</td>
					<td width="100px" align='center'>11:00-12:00</td>
					<td width="100px" align='center'>12:00-13:00</td>
					<td width="100px" align='center'>13:00-14:00</td>
					<td width="100px" align='center'>14:00-15:00</td>
					<td width="100px" align='center'>15:00-16:00</td>
					<td width="100px" align='center'>16:00-17:00</td>
					<td width="100px" align='center'>17:00-18:00</td>
				</tr>
				
				<!-- test -->
				
				<tr>
					<%for (int i=0;i<9;i++){ %>
						<% if(i==5){ %> 
						<td class='reserved' height='50px'></td>
						<%} else {%>
						<td class='canbook' height='50px'></td>
						<%} %>
					<%} %>
				</tr>				
			</table>
		</div>
		
		<div id='div_reserve'>
			<span id='span_booking_detail'>Test</span>
		</div>
		
		<div id='div_booking'>
			<table>
				<tr>
					<td>
						<span>Detail : </span>
					</td>
					<td>
						<div id='div_reservedetail'>
							<span id='span_booking_detail'></span>
							<span id='span_date'></span>							
						</div>
					</td>
					<td>
						<div>
							<span>Client : </span>
							<input id='txt_client' type='text' />
							<input id='txt_booking' type='submit'/>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</form>
</body>
</html>